<template>
  <div class="company-Demand-page">
    <com-company-navbar
      :id="this.$route.params.id"
      :companyDetailInfo="companyDetailInfo"
      @toUpdateCompanyDetailInfo="updateCompanyDetailInfo"
    ></com-company-navbar>
    <div v-if="qode == 1" @click="home_url" style="position:relative;top:-32px;right:50px;z-index:999;text-align:right;color:blue">主页</div>
<!--    <van-nav-bar left-arrow @click-left="$router.back()">
      <template #right>
        <van-icon @click="isShowSearchBox = !isShowSearchBox" name="search" size="20" style="margin-right: 20px; " />
        <van-icon name="ellipsis" size="18" @click="showOverlay = true" />
      </template>
    </van-nav-bar>
    <van-overlay :show="showOverlay" @click="showOverlay = false" class-name="over_layer">
      <van-cell-group class="layer">
        <van-cell value="公司公告" @click="$router.push(`/notice/${$route.params.id}`)" />
        <van-cell value="公司介绍" @click="$router.push(`/companyIntroduce/${$route.params.id}`)" />
        <van-cell :value="companyDetailInfo.isfoll ? '取消关注' : '关注公司'" @click="attention()" />
        <van-cell value="公司二维码" @click="$router.push({
              name: 'guide',
              query: {
                source_type: 'V',
              },
            })" />
        <van-cell value="公司链接" @click="showDig" />
        &lt;!&ndash;        <van-cell value="投诉建议" @click="toSuggest" />&ndash;&gt;
      </van-cell-group>
    </van-overlay>-->

<!--    <van-search
      v-show="isShowSearchBox"
      v-model="searchParams.keyword"
      placeholder="请输入关键词搜索"
      show-action
      shape="round"
      @search="onSearch"
    >
      <div slot="action" @click="onSearch">搜索</div>
    </van-search>-->

    <!-- 轮播图 -->
    <van-swipe
      :autoplay="3000"
      class="my-swipe"
      indicator-color="white"
      ref="mySwipe"
      :stop-propagation="false"
      @change="onImageChange"
    >
      <van-swipe-item v-for="(image, index) in images" :key="index">
        <van-image lazy-load :src="image" style="width: 100%;" @click="bigImage(images)" />
      </van-swipe-item>
    </van-swipe>

    <!-- 公司公告 -->
    <div class="company-notice" @click="toNotice">
      <div class="notice-wrap">
        <div class="notice-left">公司公告：</div>
        <div class="notice-right">
          <van-notice-bar left-icon="volume-o" :scrollable="false">
            <van-swipe vertical class="notice-swipe" :autoplay="3000" :show-indicators="false">
              <van-swipe-item v-for="(item, index) in noticeList" :key="index">{{ item }}</van-swipe-item>
            </van-swipe>
          </van-notice-bar>
        </div>
      </div>
    </div>

    <!-- 筛选条 -->
    <com-filter-bar
      @clickFilter="clickFilter"
      @getFilterBarVal="getFilterBarVal"
      :isDoFilter="isDoFilterAction"
    ></com-filter-bar>

    <com-filter-popup
      ref="comFilterPopupRef_company"
      @getFilterPopUpVal="toGetFilterPopUpVal_company"
    ></com-filter-popup>

    <!-- ----card---- -->
    <com-job-item
      :jobItem="item"
      :keyWord="'home'"
      :serchType="1"
      v-for="(item, index) in needObj"
      :key="item.id"
    ></com-job-item>
    <van-pagination
      v-show="total > 0"
      style="margin: 10px 0"
      v-model="searchParams.pageIndex"
      :total-items="total"
      @change="handlePaginationChange_company"
    >
      <template #prev-text>
        <van-icon name="arrow-left" />
      </template>
      <template #next-text>
        <van-icon name="arrow" />
      </template>
      <template #page="{ text }">{{ text }}</template>
    </van-pagination>
  </div>
</template>

<script>
import { Dialog, ImagePreview, Toast } from "vant";
import banner_1 from '@/assets/img/home/banner_1.jpg'
import banner_2 from '@/assets/img/home/banner_2.jpg'
import banner_3 from '@/assets/img/home/banner_3.jpg'

import {jobTypeList} from '../../constants/comUtils'
import comJobItem from '../../components/comJobItem'

import comFilterBar from '../../components/comFilterBar'
import comFilterPopup from '../../components/comFilterPopup'
import comCompanyNavbar from '../../components/comCompanyNavBar'
import constant from '../../utils/constant'
import {concatIds} from '../../utils'
import { mapGetters } from "vuex";

import {mixin_one} from "../../mixin/mixin";

export default {
  components: {
    comJobItem,
    comFilterBar,
    comFilterPopup,
    comCompanyNavbar
  },
  mixins: [mixin_one],
  data() {
    return {
      qode:0,
      images: [banner_1, banner_2, banner_3],
      companyDetailInfo: {},
      showOverlay: false,
      isShowSearchBox: false,
      companyId: this.$route.params.id,
      noticeList: [],
      needObj: {
        photos: [],
        educations: [],
        certificate_type: []
      },
      total: 0,
      jobTypeList,
      searchParams: {
        homeType:1,
        company_id: this.$route.params.id,
        keyword: '', // 搜索关键字
        jobcategory: '', // 招聘类型
        order: '', // 排序字段
        minSalary: null, // 起始薪资
        maxSalary: null, // 最大薪资
        adrtype: '', // 按地址
        classproperties: '', // 班制属性
        jobattributes: '', // 职位属性
        benefits: '', // 福利列表
        paymode: '', // 算薪方式
        payday: '', // 发薪日
        payMoneyDetailDate: '', // 发薪日详细日期
        createTime: '', // 发布时间
        pageIndex: 1, // 当前页
        pageSize: 10, // 每页显示条数
        linkUrlStr:'',
        
      },
    }
  },

  computed: {
    ...mapGetters(['allUserInfo'])
  },

  created() {
    // 对url进行解构赋值
    const {rpId, gId, p, g,account, cId, cn, st,qode} = this.$route.query || {};
    console.log('created()函数', rpId, gId, p, g,account, cId, cn, st,qode);
    console.log(this.$route.query)
    this.qode = qode
    const base_url = 'https://www.jinpin.love/#/welcome';
    let ids = rpId

    let company_id = gId || ''
    let certification_state = p*1
    let company_certification_state = g*1;
    let id = cId;
    let source_type = st
    this.linkUrlStr = base_url
          +
          `?company_id=${this.allUserInfo.id}&rpId=${ids}&gId=${company_id}&p=${certification_state}&g=${company_certification_state}&cId=${id}&cn=${name}&st=${source_type}&account=${this.$Base64.encode(account)}`;
    // this._toGetCompanyDetailInfo();
    // this.getNotice();
    if (this.$route.params.id) {
      this._toGetCompanyDetailInfo();
      this.getNotice();
    } else {
      this.$router.back()
    }
  },
  mounted() {
    // 初始页面
    this._getJobList_company();
  },

  methods: {
    home_url(){
      console.log('返回主页的链接1111')
      console.log(this.linkUrlStr)
      console.log('返回主页的链接1111')
      // this.$route.query.urlStr;
      window.open(this.linkUrlStr);
      // this.$router.push(this.linkUrlStr)
    },
    bigImage(img) {
      ImagePreview({
        images: img,
        closeable: true,
      })
    },
    // 查询公司公告
    async getNotice() {
      const formData = {
        company_id: this.companyId,
        type: -1,
        key: ''
      }
      const res = await this.$api.company.reqGetComNotice(formData)
      for (let i = 0; i < res.data.items.length; i++) {
        this.noticeList.push(res.data.items[i].intro)
      }
    },

    // 公告
    toNotice() {
      this.$router.push({
        path: `/notice/${this.$route.params.id}`
      })
    },

    // 滑动完最后一张的时候自动跳到公司介绍的页面
    onImageChange(index) {
      if (this.$route.params.id) {
        if (this.$refs.mySwipe.active == this.images.length) {
          if (
            Math.abs(this.$refs.mySwipe.deltaX) > Math.abs(this.$refs.mySwipe.deltaY) &&
            this.$refs.mySwipe.deltaX < 0
          ) {
            //从右侧向左滑动
            this.$router.push({
              path: `/companyIntroduce/${this.companyId}`
            })
          }
        }
      }
    },

    onSearch() {
      this.searchParams.pageIndex = 1
      this._getJobList_company()
    },

    // 筛选条
    clickFilter() {
      // 通过props父组件的方法，可实现子组件向父组件中传值
      let filterPopupRef = this.$refs.comFilterPopupRef_company;
      // 父组件调用子组件中的方法
      filterPopupRef.changeFilterPopupState();
    },

    getFilterBarVal(needParamObj) {
      console.log('当前值---筛选条', needParamObj)
      Object.assign(this.searchParams, needParamObj);
      this._getJobList_company();
    },

    toGetFilterPopUpVal_company(val, val_2) {
      console.log('子--父', val)
      this.searchParams.classproperties = val.select_class_id // 班制：坐班、站班
      this.searchParams.jobattributes = val.select_position_attribute_id // 职位属性：两班倒、三班倒、、、
      this.searchParams.benefits = concatIds(val.select_welfare_list) // 福利列表
      this.searchParams.paymode = val.select_payWay_id // 算薪方式
      this.searchParams.payday = val.select_payMoneyDay_id // 发薪日
      this.searchParams.payMoneyDetailDate = val.select_payMoneyDay_detail // 发薪日详细日期
      this.searchParams.createTime = val.select_publish_date // 发布时间

      console.log('searchParams:', this.searchParams);

      this._updateFilterOperationObj(val_2);

      this.searchParams.pageIndex = 1
      this._getJobList_company()
    },

    // 公共函数
    async _getJobList_company() {
      const res = await this.$api.job.getJobPage(this.searchParams)
      if (res.code === 200) {
        this.needObj = res.data.items
        this.total = res.data.count
        if (this.total == 0) this.totalType = 0
      }
    },

    handlePaginationChange_company(pageIndex) {
      this.searchParams.pageIndex = pageIndex
      this._getJobList_company()
    },



    async _toGetCompanyDetailInfo(){
      this.companyId = this.$route.params.id;
      const res = await this.$api.company.reqCompanyMes(this.companyId);
      if(res.code === 200){
        this.companyDetailInfo = res.data;
        if (res.data.imgurl != '' && res.data.imgurl) {
          this.images = res.data.imgurl.split(',')
        }
      }
    },


    updateCompanyDetailInfo(val){
      this._toGetCompanyDetailInfo();
    },
  },
}
</script>

<style lang="scss" scoped>
.company-Demand-page {
  width: 100%;
  font-size: 12px;
  background-color: #f1f3f4;

  .my-swipe {
    width: 100%;
    height: 200px;
    overflow: hidden;
  }

  .van-image {
    height: 100%;
  }

  //公告
  .company-notice {
    height: 30px;
    width: 100%;
    background: white;
    font-weight: bold;

    .notice_bar {
      font-weight: 500;
    }

    // margin-top: 10px;
    .notice-wrap {
      width: 100%;
      height: 100%;
      display: flex;
      padding: 0 5px;
      align-items: center;
      box-sizing: border-box;

      .notice-left {
        border-right: 1px solid #a8a8a8;
        padding: 0 5px;
      }

      .notice-right {
        flex: 1;
        height: 100%;

        .van-notice-bar {
          height: 100%;
          padding: 0 2px;
          background: transparent;
          .notice-swipe {
            height: 40px;
            line-height: 40px;
            font-weight: 400;
          }
        }
      }
    }
  }

  .CompanyType {
    background: white;
  }
}
</style>
